<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin Dashboard</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Custom styles for sidebar -->
    <style>
        /* Custom sidebar styles */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 250px;
            padding-top: 3.5rem;
            background-color: #343a40;
            color: #fff;
        }

        .sidebar-item {
            padding: 10px 20px;
            margin-bottom: 0;
            color: rgba(255, 255, 255, 0.75);
        }

        .sidebar-item:hover {
            color: #fff;
            background-color: #495057;
        }

        .main-content {
            margin-left: 250px;
            padding: 20px;
        }

        iframe {
            border: none;
            width: 100%;
            height: calc(100vh - 3.5rem); /* Adjust height to fit remaining viewport */
        }
    </style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
    <h4 class="text-center mb-4">Admin Menu</h4>
    <ul class="list-unstyled">
        <li class="sidebar-item" onclick="loadContent('product_crud.html')">商品管理</li>
        <li class="sidebar-item" onclick="loadContent('order.html')">订单查询</li>
    </ul>
</div>

<!-- Main content area -->
<div class="main-content">
    <iframe id="contentFrame" src="" frameborder="0"></iframe>
</div>

<!-- Bootstrap JS and jQuery (for Bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Custom JavaScript to handle sidebar menu -->
<script>
    function loadContent(url) {
        document.getElementById('contentFrame').src = url;
    }
</script>
</body>
</html>
